<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>登陆</title>
<!--用百度的静态资源库的cdn安装bootstrap环境-->
<!-- Bootstrap 核心 CSS 文件 -->
<link
	th:href="@{https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css}"
	rel="stylesheet" />
<!--font-awesome 核心我CSS 文件-->
<link
	th:href="@{//cdn.bootcss.com/font-awesome/4.3.0/css/font-awesome.min.css}"
	rel="stylesheet" />
<!-- 在bootstrap.min.js 之前引入 -->
<script
	th:src="@{https://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js}"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script
	th:src="@{https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js}"></script>
<!--jquery.validate-->
<script type="text/javascript" th:src="@{/js/jquery.validate.min.js}"></script>
<script type="text/javascript" th:href="@{/js/message.js}"></script>
<script th:inline="javascript" type="text/javascript">
	/* jquery 表单简单验证 */
	$().ready(function() {
		$("#login_form").validate({
			rules : {
				userName : "required",
				password : {
					required : true,
					minlength : 6,
				},
			},
			messages : {
				userName : "请输入姓名",
				code : "请输入验证码",
				password : {
					required : "请输入密码",
					minlength : jQuery.format("密码不能小于{0}个字 符")
				},
			}
		});
	});
</script>
<style type="text/css">
body {
	background: url(../images/4.jpg) no-repeat;
	background-size: cover;
	font-size: 16px;
}

.form {
	background: rgba(255, 255, 255, 0.2);
	width:450px;
	margin:100px auto;
	padding-left: 10px;
	padding-right: 10px;
}

#login_form {
	display: block;
}

#register_form {
	display: none;
}

.fa {
	display: inline-block;
	top: 27px;
	left: 6px;
	position: relative;
	color: #ccc;
}

input[type="text"],input[type="password"] {
	padding-left: 26px;
}

.checkbox {
	padding-left: 21px;
}
</style>
</head>
<body>
	<div class="container">
		<div class="form row">
			<form th:action="@{/blogger/login.html}"
				class="form-horizontal col-sm-offset-3 col-md-offset-3"
				method="post" id="login_form">
				<!-- 标题 -->
				<h3 class="form-title" style="margin-left: 10%">Admin for Blog</h3>
				<div class="col-sm-9 col-md-9">
					<div class="form-group">
						<i class="fa fa-user fa-lg"> </i>
						<!-- 用户名  -->
						<input class="form-control required" type="text"
							placeholder="Username" name="userName" autofocus="autofocus"
							maxlength="20" />
					</div>
					<div class="form-group">
						<i class="fa fa-lock fa-lg"></i>
						<!-- 密码 -->
						<input class="form-control required" type="password"
							placeholder="Password" name="password" maxlength="12" />
					</div>
					<div class="form-group">
						<i class="fa fa-lock fa-lg"></i>
							<input type="text" name="code" lay-verify="" placeholder="请输入验证码"
								autocomplete="off" class="form-control required">
						<hr />
						<img id="imgObj" alt="验证码" th:src="@{/blog/redisValidateCode}"
							onclick="changeImg()" /> 
							<a href="#" onclick="changeImg()">换一张</a>
					</div>
					<div class="form-group">
						<p style="font-size: 12px; color: red;"
							th:if="${errorInfo != null}"
							th:text="${#httpServletRequest.getAttribute('errorInfo')}"></p>
					
					</div>
					<div class="form-group">
						<!-- 登陆  -->
						<input type="submit" class="btn btn-success pull-right"
							value="登陆 " />
					</div>
				</div>
			</form>
		</div>
	</div></body>
	<footer>
		<p  style="text-align: center;">
			<span>Copyright</span><span>&copy;</span><span>2017</span><a style="color: blue" href="https://www.dreamylost.cn">梦境迷离</a><span>Design
				By jxnu-liguobin</span>
		</p>
		<p style="text-align: center;">
			<a style="color: blue" href="http://www.miitbeian.gov.cn" target="_blank">赣ICP备17017283号-1</a>
		</p>
	</footer>
	<script th:inline="javascript" type="text/javascript">  
    // 刷新图片  
    function changeImg() {  
        var imgSrc = $("#imgObj");  
        var src = '/blog/redisValidateCode'
        imgSrc.attr("src", changeUrl(src));  
    }  
    //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳  
    function changeUrl(url) {  
        var timestamp = (new Date()).valueOf();  
        var index = url.indexOf("?",url);  
        if (index > 0) {  
            url = url.substring(0, url.indexOf(url, "?"));  
        }  
        if ((url.indexOf("&") >= 0)) {  
            url = url + "×tamp=" + timestamp;  
        } else {  
            url = url + "?timestamp=" + timestamp;  
        }  
        return url;  
    }  
</script>
</body>
</html>
